<template>
  <el-dialog
    :title="form.personId ? '编辑成员信息' : '添加新成员'"
    :model-value="visible"
    @update:modelValue="$emit('update:visible', $event)"
    width="600px"
    @close="resetForm"
  >
    <el-form :model="form" ref="formRef" :rules="rules" label-width="100px">
      <!-- 【新增】展示ID信息 -->
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="成员唯一ID">
            <el-input :value="form.personId || '自动生成'" disabled />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="所属家谱ID">
            <el-input :value="form.familyId" disabled />
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" placeholder="请输入成员姓名" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="性别" prop="gender">
            <el-radio-group v-model="form.gender">
              <el-radio label="M">男</el-radio>
              <el-radio label="F">女</el-radio>
              <el-radio label="O">其他</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 【修正】日期改为可直接填写 -->
      <el-form-item label="出生日期">
        <el-date-picker
          v-model="form.birthDate"
          type="date"
          placeholder="可选择或直接输入 (格式: YYYY-MM-DD)"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          :editable="true"
          :clearable="true"
          style="width: 100%;"
        />
      </el-form-item>
      <el-form-item label="逝世日期">
        <el-date-picker
          v-model="form.deathDate"
          type="date"
          placeholder="可选择或直接输入 (格式: YYYY-MM-DD)"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          :editable="true"
          :clearable="true"
          style="width: 100%;"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button @click="$emit('update:visible', false)">取消</el-button>
      <el-button type="primary" @click="submitForm" :loading="loading">确定</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch, reactive } from 'vue';
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
import type { PersonFormData } from '@/types/api';
import { addPersonApi, updatePersonApi } from '@/api/person';

const props = defineProps<{
  visible: boolean;
  familyId: number;
  personData?: PersonFormData | null;
}>();

const emit = defineEmits(['update:visible', 'success']);

const formRef = ref<FormInstance>();
const loading = ref(false);

const form = reactive<PersonFormData>({
  familyId: props.familyId,
  name: '',
  gender: 'M',
});

const rules: FormRules = {
  name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
};

watch(
  () => props.personData,
  (newData) => {
    if (newData) {
      Object.assign(form, newData);
    } else {
      resetForm();
    }
  },
);

const resetForm = () => {
  form.personId = undefined;
  form.name = '';
  form.gender = 'M';
  form.birthDate = undefined;
  form.deathDate = undefined;
  form.familyId = props.familyId;
};

const submitForm = async () => {
  if (!formRef.value) return;
  await formRef.value.validate(async (valid) => {
    if (valid) {
      loading.value = true;
      try {
        if (form.personId) {
          await updatePersonApi(form.personId, form);
        } else {
          await addPersonApi(form);
        }
        ElMessage.success(form.personId ? '更新成功！' : '添加成功！');
        emit('success');
        emit('update:visible', false);
      } catch (e) {
        console.error(e);
      } finally {
        loading.value = false;
      }
    }
  });
};
</script>
